Emacs 對於 Javascript 的功能支援

• js2-mode: 取代原 js-mode
  • 程式高亮
  • 語法檢查 (使用 js-lint)
  • 程式折疊
• tide-mode: 使用微軟 tsserver 後端，跟 VS Code 相同
  • 自動補全：使用 company-tide
  • 語法檢查： 使用 flycheck + eslint
  • 函式定義文件： 配合 Eldoc
  • 跳到函式定義，搜尋函式使用
  • 函式變數重構
• Prettier：程式自動排版美化

預先安裝

• 安裝 eslint

$npm -g install eslint

• 設定，加入 ~/.eslintrc，例如

{
  "extends": "eslint:recommended",        
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "ecmaFeatures": {
    "arrowFunctions": true,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": true,
    "spread": true,
    "templateStrings": true,
    "jsx": true
  },
  "rules": {
    "semi": ["warn", "always"], 
    "quotes": ["warn", "double"],
    "consistent-return": [0],
    "key-spacing": [0],
    "new-cap": [0],
    "no-multi-spaces": [0],
    "no-shadow": [0],
    "no-unused-vars": [1],
    "no-use-before-define": [2, "nofunc"],
    "no-console": [0]
  }
}

安裝

• 安裝 js2-mode

(use-package js2-mode
  :ensure t
  :mode (("\\.js\\'" . js2-mode)
         ("\\.json\\'" . javascript-mode))
  :init
  (setq-default js2-basic-offset 2)
  (setq-default js2-global-externs '("module" "require" "assert" "setInterval" "console" "__dirname__") )
  )

開啟 .js 檔案時啟動 js2-mode 主模式，設定 indent-offset 為 2，設定一些 javascript 的 global objects 跟 methods

• 安裝 tide-mode

(defun setup-tide-mode ()
  "Setup tide mode for other mode."
  (interactive)
  (message "setup tide mode")
  (tide-setup)
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-mode +1)
  ;; company is an optional dependency. You have to
  ;; install it separately via package-install
  ;; `M-x package-install [ret] company`
  (company-mode +1))

(add-hook 'js2-mode-hook #'setup-tide-mode)

• 設定
  • 使用 tide-setup 來啟動 tsserver
  • 設定使用 flycheck
  • 設定使用 eldoc
  • 設定使用 company 來做補全
  • 安裝 prettier

(use-package prettier-js
  :ensure t
  :hook ((js2-mode . prettier-js-mode))
  :config
  (setq prettier-js-args '(
                           "--trailing-comma" "all"
                           "--bracket-spacing" "false"
                           ))
  )

當使用 js2-mode 時啟動 prettier-js-mode

我們下一篇再來看如何使用這些安裝完的功能

相關影片

相關簡報: 簡報
相關程式: Github
相關資訊：請參考 我的部落格